<template>
	<!-- 		弹出层 -->
	<view style="z-index: 9999;overflow: hidden;" v-if="status">
		<!-- 蒙版 -->
		<view class="position-fixed top-0 left-0 right-0 bottom-0" @click="hidden()" :style="getMaskColor">

		</view>
		<!-- 			弹出框内容 -->
		<view class="position-fixed"  :class="getBodyClass" :style="getBodyStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//蒙版颜色
			maskColor: {
				type: Boolean,
				default: false
			},
			//是否开启蒙版
			mask: {
				type: Boolean,
				default: true
			},
			fixedBottom: {
				type: Boolean,
				default: false
			},
			//居中
			center: {
				type: Boolean,
				default: false
			},			
			//弹出层内容高度
			bodyWidth:{
				type:Number,
				default:0
			},
			bodyHeight:{
				type:Number,
				default:0
			},
			bodyColor:{
				type:String,
				default:"bg-white"
			},
			transformOrigin:{
				type:String,
				default:"left top"
			},
			tabbarHeight:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				status: false,
				x:-1,
				y:1,
				maxX:0,
				maxY:0
			}
		},
		mounted() {
			try{
				const res=uni.getSystemInfoSync();
				console.log(res,"res");
				this.maxX=res.windowWidth-uni.upx2px(this.bodyWidth);
				this.maxY=res.windowHeight-uni.upx2px(this.bodyHeight)-uni.upx2px(this.tabbarHeight)
			}catch{
				
			}
		},
		computed: {
			getMaskColor() {
				let i = this.maskColor ? 0.5 : 0;
				return `background-color:rgba(0,0,0,${i})`
			},
			getBodyClass(){
				if(this.center){
					return 'left-0 right-0 bottom-0 top-0 flex justify-center align-center'
				}
				let bottom=this.fixedBottom? 'left-0 right-0 bottom-0':'rounded border';
				return  `${this.bodyColor} ${bottom}` 
			},
			getBodyStyle(){
				
				let left=this.x>-1?`left:${this.x}px;`:''
				let top=this.y>-1?`top:${this.y}px;`:''
				console.log( `${left} ${top}`);
				 return `${left} ${top}`
			// return left+top
			}
		},
		methods: {
			show(x=-1,y=-1) {
				console.log(this.maxX,this.maxY,"12333");
	
				this.x=(x>this.maxX)?this.maxX:x;
				this.y=(y>this.maxY)?this.maxY:y;
				console.log(this.x,this.y);
				this.status = true
			},
			hidden() {
				this.status = false
			}
		}
	}
</script>

<style>
</style>
